<template>
  <div class="containers">
    <div id="canvas" ref="canvas"></div>
  </div>
</template>

<script>
  import BpmnViewer from 'bpmn-js'
  import MoveCanvasModule from 'diagram-js/lib/navigation/movecanvas'

  let bpmnViewer = null
  export default {
    name: 'bpmnView',
    data () {
      return {
        msg: 'Welcome to yjr Vue.js App',
        bpmnModeler: null,
        processInstanceId: '61c4d8b1-3ce2-11ee-800d-a4b1c135c088'
      }
    },
    mounted () {
      bpmnViewer = new BpmnViewer({
        container: '#canvas',
        // width: '100%',
        // height: '100%',
        additionalModules: [
          MoveCanvasModule // 移动整个画布
        ]
      })

      this.greet()
    },
    methods: {
      createBpmnViewer: async function (bpmnXML) {
        try {
          await bpmnViewer.importXML(bpmnXML)
        } catch (err) {
          console.error('error loading BPMN 2.0 XML', err)
        }
        let canvas = bpmnViewer.get('canvas')
        canvas.zoom('fit-viewport', 'auto')
      },
      greet: function () {
        const that = this
        let data = {processDefinitionId: 'Process_1:1:2c897e52-3cd6-11ee-b4bb-a4b1c135c088'}
        this.$http.getRequest('user/getProcessModel', data).then((response) => {
          if (response.data.code == 200) {
            that.createBpmnViewer(response.data.data.bpmn20Xml.bpmn20Xml)
            that.getAct()
          }
        })
          .catch((response) => {
            console.log(response)
          })
      },

      getAct: function () {
        const that = this
        let canvas = bpmnViewer.get('canvas')
        // const processInstanceId = this.$route.query.processInstanceId
        //根据启动流程的 processInstanceId 查询流程图
        let data = {processInstanceId: '10e1b9ef-3ff5-11ee-b9ae-a4b1c135c088'}
        this.$http.getRequest('user/HistoricActivityInstance', data)
          .then((res) => {
            if (res.data.code == 200) {
              //高亮线
              // let list = res.data.data.highLine
              // for (var actId in list) {
              //   console.log(list[actId])
              //   canvas.addMarker(list[actId], 'highlight')
              // }
              //高亮线
              res.data.data.highLine.forEach((e) => {
                if (e) {
                  canvas.addMarker(e, 'highlightFlow')
                }
              })
              //高亮任务
              res.data.data.highPoint.forEach((e) => {
                if (e) {
                  canvas.addMarker(e, 'highlight')
                }
              })

              //高亮我执行过的任务
              res.data.data.ido.forEach((e) => {
                if (e) {
                  canvas.addMarker(e, 'highlightIDO')
                }
              })
              //高亮下一个任务
              res.data.data.waitingToDo.forEach((e) => {
                if (e) {
                  canvas.addMarker(e, 'highlightTODO')
                }
              })

            }
          })
          .catch((response) => {
            console.log(response)
          })
      }
    }
  }
</script>
<style>

  /*.highlight .djs-visual > :nth-child(1) {*/
  /*  stroke: green !important;*/
  /*  fill: rgba(0, 80, 0, 0.4) !important;*/
  /*}*/

  .djs-container {
    height: 60vh !important;
  }

  .highlight .djs-visual > :nth-child(1) {
    stroke: green !important;
    fill: rgba(0, 80, 0, 0.4) !important;
  }

  .highlightFlow .djs-visual > :nth-child(1) {
    stroke: green !important;
  }

  /**
   我执行过的任务
   */
  .highlightIDO .djs-visual > :nth-child(1) {
    stroke: rgb(255, 196, 0) !important;
    fill: rgba(255, 196, 0, 0.4) !important;
  }

  .highlightTODO .djs-visual > :nth-child(1) {
    stroke: rgb(30, 144, 255) !important;
    fill: rgba(255, 255, 255, 0.4) !important;
  }

</style>
